<template>
  <div class="footer-wrapper">
    <div class="copy-right-wrapper">
      <img
          class="logo"
          :src="logoUrl"
          :alt="$store.getters.imgAlt + 'footerLogo'"
      />
      <div class="copy-right">
        <span>{{ webSiteName }} {{ copyrightYear }} 版权所有</span>
        <span class="split">|</span>
        <span
        ><a
            class="link"
            style="color: white"
            href="#"
            target="_blank"
        >{{ licenseNo }}</a
        >&nbsp;</span
        >
        <p class="tip-website">
          为获得最佳浏览体验，建议使用IE11、FireFox50.5、Chrome51.0及以上版本的浏览器
        </p>
      </div>
    </div>
    <div class="join-us">
      <div class="desc">如果你也是对技术感兴趣的小伙伴，欢迎加入我们</div>
      <ul class="join-list">
        <li class="join-item" v-for="(item, index) in joinList" :key="index">
          <el-popover placement="top" trigger="hover">
            <img
                class="img"
                :src="item.img"
                :alt="`${$store.getters.imgAlt} ${item.title}`"
                style="width: 130px"
            />
            <i
                slot="reference"
                :class="`iconfont ${item.logo} ${item.class}`"
            ></i>
          </el-popover>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { getParamsDetail } from '_r/home.js'

export default {
  name: 'Footer',
  data() {
    return {
      logoUrl: require('_a/images/common/shiyue.png'),
      webSiteName: '时越网盘',
      licenseNo: '基于开源项目奇文网盘的二次开发',
      joinList: [
        {
          class: 'qq',
          logo: 'icon-qq',
          img: require('_a/images/footer/qq.png'),
          title: 'QQ群'
        },
        {
          class: 'wechat',
          logo: 'icon-weixin-copy',
          img: require('_a/images/footer/weixin.png'),
          title: '微信公众号'
        },
        {
          class: 'gitee',
          logo: 'icon-mayun',
          img: require('_a/images/footer/gitee.png'),
          title: '码云 开源社区'
        }
      ]
    }
  },
  computed: {
    copyrightYear() {
      return new Date().getFullYear()
    }
  },
  created() {
    this.getParamsDetailData()
  },
  methods: {
    /**
     * 获取系统参数信息
     */
    getParamsDetailData() {
      getParamsDetail({ groupName: 'copyright' }).then((res) => {
        if (res.success) {
          this.licenseNo = res.data.licenseKey || '基于开源项目奇文网盘的二次开发'
          this.webSiteName = res.data.domainChineseName || '时越网盘'
        }
      })
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~_a/styles/varibles.styl';

.footer-wrapper {
  margin-top: 20px;
  display: flex;

  .copy-right-wrapper {
    width: 65%;
    color: $BorderLight;
    background: linear-gradient(to right, $Primary, #66b1ff);
    padding: 16px 0 16px 5vw;
    font-size: 14px;
    color: $BorderLight;
    display: flex;
    align-items: center;

    .logo {
      width: 240px;

      display: block;
      @media screen and (max-width: 920px) {
        width: 160px;
      }
    }

    .split {
      margin: 0 8px;
    }

    .link {
      &:hover {
        text-decoration: underline;
      }
    }

    .tip-website {
      padding-top: 8px;
    }
  }

  .join-us {
    background: linear-gradient(to right, $Placeholder, $Info);
    width: 35%;
    padding: 16px 5vw 16px 40px;
    color: #fff;

    .join-list {
      margin-top: 16px;
      display: flex;
      list-style: none;

      .join-item {
        .iconfont {
          margin-right: 16px;
          font-size: 30px;
          cursor: pointer;
        }

        .qq {
          &:hover {
            color: $Primary;
          }
        }

        .wechat {
          &:hover {
            color: $Success;
          }
        }

        .gitee {
          &:hover {
            color: #c71d24;
          }
        }
      }
    }
  }
}
</style>
